<template>
  <div class="all">
    <div class="all_nav">
      <el-button @click="add=true">添加等级</el-button>
       <el-button type="primary" @click="submit">确定修改</el-button>
    </div>
    <el-table :data="list">
      <el-table-column align="center" label="等级名称">
        <template slot-scope="{row}">
          <el-input size="small" v-model="row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="等级">
        <template slot-scope="{row}">
          <el-input size="small" v-model.number="row.level"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图标">
        <template slot-scope="{row}">
          <el-image fit="fit" :src="row.picUrl"></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" label="消费下限">
        <template slot-scope="{row}">
          <el-input size="small" v-model.number="row.min"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="消费上限">
        <template slot-scope="{row}">
          <el-input size="small" v-model.number="row.max"></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <el-button type="danger" size="small" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      <button @click="submit">保存</button>
    <el-dialog width="20%" title="添加富豪等级" :visible.sync="add">
      <el-form :model="richLevels" :rules="rules" label-width="100px" ref="Level">
        <el-form-item label="等级名称" prop="name">
          <el-input size="small" v-model.number="richLevels.name"></el-input>
        </el-form-item>
        <el-form-item label="等级" prop="level">
          <el-input size="small" v-model.number="richLevels.level"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="picUrl">
      <el-upload
        class="avatar-uploader"
        action="#"
        :show-file-list="false"
        :on-change="handleChange"
        :auto-upload="false">
        <img v-if="richLevels.picUrl" :src="richLevels.picUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
        </el-form-item>
        <el-form-item label="消费下限" prop="min">
          <el-input size="small" v-model.number="richLevels.min"></el-input>
        </el-form-item>
        <el-form-item label="消费下限" prop="max">
          <el-input size="small" v-model.number="richLevels.max"></el-input>
        </el-form-item>
            <el-button @click="AddLevels" type="primary">添加</el-button>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
  import {RichLevelGetAll,RichLevelDel,RichLevelUpload,RichLevelMod} from '@/utils/API'
  import Cookies from 'js-cookie'
  export default{
    inject:["reload"],

    data(){
      return{
        add:false,
        list:[],
        richLevels:{
          min:'',
          picUrl:''
        },
        rules:{name:[{min:2,required: true, message: '请输入等级名称', trigger: 'blur' }],
               level:[{ required: true, message: '请输入等级', trigger: 'blur'}],
               picUrl:[{required: true, message: '请上传图标', trigger: 'change'}],
               min:[{trigger: 'blur1',required: true,message: '请输入消费下限'}],
               max:[{trigger: 'blur',required: true,message: '请输入消费上限'}]
        }
      }
    },
    methods:{
      handleChange(file){
        var size = file.size/1024/1024<2
         var type= file.raw.type=== 'image/jpeg' || file.raw.type === 'image/png' || file.raw.type === 'image/bmp'
          if(size&&type){
            var _this=this
             _this.richLevels.picName=file.name
            var event = event || window.event
            var file = event.target.files[0];
            var reader = new FileReader();
                reader.onload = function(e) {
                  _this.richLevels.picUrl =e.target.result
                 }
                reader.readAsDataURL(file);
          }
      },
      //添加
      AddLevels(){
        this.$refs.Level.validate((valid)=>{
          if(this.richLevels.max>this.richLevels.min){
            const data={
              adminName:Cookies.get('adminName'),
              token:Cookies.get('token'),
              name:this.richLevels.name,
              picName:this.richLevels.picName,
              pic:this.richLevels.picUrl.split(',')[1]
            }
                RichLevelUpload(data).then(res=>{
                  if(res.code==0){
                    this.richLevels.picUrl=res.data
                    this.list.push(this.richLevels)
                    this.submit()
                  }
                })
          }
        })
      },
      //提交
      submit(){
          const data={
            adminName:Cookies.get('adminName'),
            token:Cookies.get('token'),
            richLevels:this.list
          }
          RichLevelMod(data).then(res=>{
            if(res.code==0){
              this.$message.success('操作成功')
              this.reload()
            }else{
              this.$message.error(res.desc)
            }
          })
       },
       del(e){
          var _this=this
             this.$confirm('此操作将删除'+e.name+', 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const data={
              adminName:Cookies.get('adminName'),
              token:Cookies.get('token'),
              id:e.id
            }
            RichLevelDel(data).then(res=>{
            if(res.code==0){
              this.$message.success('操作成功')
              this.reload()
            }else{
              this.$message.error(res.desc)
            }
            })
       })
       },
      Postdata(url,e){
        const data={
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        }
        RichLevelGetAll(data).then(res=>{
          this.list=res.data.richLevels
          this.richLevels.min=this.list[this.list.length-1].max
        })
      }
    },
    mounted(){
    this.Postdata()
    },
  }
</script>

<style lang="scss" scoped>
.el-image{
  width: 80%;
  height: 100px;
}
.el-table td, .el-table th{
  padding: 0;
}
.el-form{
  width: 80%;
  margin: auto;
  text-align: center;
  .el-input{width: auto;}
  .avatar-uploader,/deep/ .el-upload{width: 100%;}
  .el-icon-plus{border: 1px dashed #d9d9d9;border-radius: 6px;}
    .avatar,.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100%;
      height: 100%;
      line-height: 178px;
      text-align: center;
    }
}
</style>
